<style>
    #container {
        background: white;
    }
</style>
<div id="container" class="fsh-rightPanel">
    <div id="treeDemo" class="demo-tree-more"></div>
</div>


<script>
    layui.use(['layer', 'tree'], function () {
        var layer = layui.layer;
        var tree = layui.tree;
        data = [{
            title: 'CG基础'
            , id: 1
            , children: [{
                title: '基础教程1'
                , id: 1000
            }, {
                title: '基础教程2'
                , id: 1001
            }, {
                title: '基础教程3'
                , id: 1002
            }]
        }, {
            title: '动画基础'
            , id: 2
            , children: [{
                title: '基础教程1'
                , id: 2000
            }, {
                title: '基础教程2'
                , id: 2001
            }]
        },{
            title: '引擎基础'
            , id: 1
            , children: [{
                title: '基础教程1'
                , id: 1000
            }, {
                title: '基础教程2'
                , id: 1001
            }, {
                title: '基础教程3'
                , id: 1002
            }]
        },{
            title: '模型基础'
            , id: 1
            , children: [{
                title: '基础教程1'
                , id: 1000
            }, {
                title: '基础教程2'
                , id: 1001
            }, {
                title: '基础教程3'
                , id: 1002
            }]
        }];
        tree.render({
            elem: '#treeDemo'
            , data: data
            , showCheckbox: true  //是否显示复选框
            , id: 'treeDemo1'
            , click: function (obj) {
                var data = obj.data;  //获取当前点击的节点数据
                //layer.msg('状态：' + obj.state + '<br>节点数据：' + JSON.stringify(data));
            }
        });
    });
</script>
